<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Shadow</title>
</head>

<body>
  <section class="border-section">
    <section class="border-section__corner"></section>
    <section class="border-section__corner right-top"></section>
    <section class="border-section__corner right-bottom"></section>
    <section class="border-section__corner left-bottom"></section>

    <section class="border-section__content">
      <p>
        北国风光，千里冰封，万里雪飘。
        望长城内外，惟余莽莽；大河上下，顿失滔滔。(余 通：馀)
        山舞银蛇，原驰蜡象，欲与天公试比高。(原驰 原作：原驱)
        须晴日，看红装素裹，分外妖娆。(红装 一作：银装)
        江山如此多娇，引无数英雄竞折腰。
        惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
        一代天骄，成吉思汗，只识弯弓射大雕。
        俱往矣，数风流人物，还看今朝。
      </p>
    </section>
  </section>

  <style>
    :root {
      --base-color: rgb(32, 176, 233);
      --border-size: 2px;
      --n-border-size: -2px;
      --corner-size: 16px;
      --half-corner-size: calc(var(--corner-size) / 2);
      --quad-corner-size: calc(var(--corner-size) / 4);
    }

    .border-section {
      position: relative;
      border: var(--border-size) solid var(--base-color);
    }

    .border-section__content {
      padding: var(--corner-size);
      text-indent: 2em;
    }

    /* 四角定位 */

    .right-top {
      left: calc(100%);
      transform: rotate(90deg);
    }

    .right-bottom {
      left: calc(100%);
      top: calc(100%);
      transform: rotate(180deg);
    }

    .left-bottom {
      top: calc(100%);
      transform: rotate(-90deg);
    }

    /* 大正方形 */

    .border-section__corner {
      position: absolute;
      width: var(--corner-size);
      height: var(--corner-size);
      transform-origin: 0 0;
      box-shadow:
        var(--corner-size) 0 var(--base-color),
        0 var(--corner-size) var(--base-color);
    }

  </style>

</body>

</html>
